<template>
  <div class="app-container">
    <el-dialog :visible="visiable" :title="title" @close="cancel">
      <el-form ref="form" :model="form" :rules="rule" label-width="100px">
        <el-form-item label="变更类型" prop="changeType">
          <el-select v-model="form.changeType" placeholder="请选择变更类型">
            <el-option label="出账" :value="0"></el-option>
            <el-option label="入账" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="变更金额" prop="money">
          <el-input-number v-model="form.money" />
        </el-form-item>

        <el-form-item label="变更原因" prop="reason">
          <el-input v-model="form.reason" type="textarea" rows="6" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <el-button type="primary" v-hasPermi="['finance:change:money']" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { CHANGE_RECHARGE_RULE } from '@/constant/rule';
import { addRecord } from "@/api/finance/changeRecord"
export default {

  props: {
    item: {
      type: Object,
      default: {}
    },

    title: {
      type: String,
      default: ""
    },

    visiable: {
      type: Boolean,
      default: false
    }
  },

  mounted() {
    this.form.userId = this.item.id;
  },


  watch: {
    visiable(newValue, oldValue) {
      if (newValue) {
        this.form.userId = this.item.id;
      }
    }

  },

  data() {
    return {
      rule: CHANGE_RECHARGE_RULE,
      form: {
        reason: "",
        money: 0,
        changeType: undefined,
        userId: 0,
      },
    };
  },

  methods: {
    close() {
      this.$emit("close", false, this.form);
    },

    cancel() {
      this.close();
      this.$refs['form'].resetFields();
    },

    submitForm() {
      this.$refs['form'].validate(valid => {
        console.log("valid", valid);
        if (!valid) {
          return;
        }
        // 发送到服务器
        addRecord(this.form).then(res => {
          this.$message.success(res.msg);

          this.$emit("close", false, this.form, true);
        });
      })
    }
  },
};
</script>

<style>
.center {
  text-align: center;
}
</style>
